import { Component, Emit, Prop } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import RenderDescription from '@/components/render-descriotion/Index'
import type { DescItemDto } from '@/components/render-descriotion/Index'
import type { InsurePeriodServeCompanyDto } from '@/api/insurance/serveCompany/types'
import { EditOutlined } from '@ant-design/icons-vue'
import renderModal, { getModelValue, type FormModalDto } from '@/components/modal/Modal'
import { message } from 'ant-design-vue'
import { updateSpecialAppoint } from '@/api/insurance/serveCompany'

@Component
export class SepcialAgreement extends Render {
    @Prop() serveCompanyInfo!: InsurePeriodServeCompanyDto
    @Emit('refresh')
    handleRefresh() {}

    formConfig = this.initFormConfig() as FormModalDto
    initFormConfig() {
        return {
            title: '特别约定',
            width: '500px',
            theme: 'light',
            show: false,
            gutter: 20,
            items: {
                specialAppoint: {
                    name: '特别约定',
                    element: 'input',
                    required: true
                }
            },
            complete: async () => {
                const data = getModelValue(this.formConfig)
                await updateSpecialAppoint({
                    id: this.serveCompanyInfo.id,
                    specialAppoint: data.specialAppoint
                })
                message.success('操作成功')
                this.handleRefresh()
                this.formConfig.show = false
            },
            cancel: () => {
                this.formConfig.show = false
            }
        } as FormModalDto
    }


    get clientInfoData() {
        return [
            {
                label: '特别约定',
                value: <div class="flex items-center">
                    <span class="mr-5px">{this.serveCompanyInfo.specialAppoint ?? '--'}</span>
                    <EditOutlined class="cursor-pointer" onClick={this.onEdit} />
                </div> 
            }
        ] as DescItemDto[]
    }

    onEdit() {
        this.formConfig.show = true
    }

    render() {
        return <>
            <RenderDescription renderData={this.clientInfoData} />
            {renderModal(this.formConfig)}
        </>
    }
}

export default toNative<{ serveCompanyInfo: InsurePeriodServeCompanyDto }, { refresh: () => void }>(
    SepcialAgreement
)
